<template>
  <div class="container">
    <div>
      <svg-icon :icon-class="isFullScreen?'exit-fullscreen':'fullscreen'" class="fullscreen" @click="screenFull" />
    </div>
  </div>
</template>
<script>
import screenfull from 'screenfull'
export default {
  name: 'ScreenFull',
  data() {
    return {
      isFullScreen: false // 是否是全屏
    }
  },
  mounted() {
    // change监听全屏与否的状态
    screenfull.on('change', () => {
      // screenfull.isFullscreen 是插件本身给提供的全屏与否的状态
      // 如果是全屏,值为true,如果是退出全屏,值为false
      this.isFullScreen = screenfull.isFullscreen
    })
  },
  methods: {
    screenFull() {
      // toggle方法是screenfull提供的切换到全屏的方法
      screenfull.toggle()
      this.isFullScreen = !this.isFullScreen
    }
  }
}
</script>
<style scoped lang="scss">
.fullscreen{
  color: #fff;
}
</style>
